<template>
	<view>
		<view class="m-mg-lr u-m-t-30">
			<view class="m-card">
				<view class="u-flex u-flex-between">
					<view><text class="m-font-b u-font-32">本人看房</text></view>
					<view>
						<u-switch v-model="form.is_benren" activeColor="#0E5543"></u-switch>
					</view>
				</view>
				<view class="m-mg-lr u-p-b-20 u-border-bottom">
					<u--form :model="form" ref="uForm" errorType="toast" labelWidth="160rpx">
						<u-form-item>
							<view class="m-font-b u-font-32">客户信息</view>
						</u-form-item>
						<u-form-item label="客户名称" prop="name" required>
							<u-search shape="square" searchIcon=" " :clearabled="false" :showAction="false"
								v-model="form.name" inputAlign="right" bgColor="#eee" placeholder="请输入姓名"></u-search>
						</u-form-item>
						<u-form-item label="客户性别" :borderBottom="false">
							<view class="u-flex u-flex-between">
								<view></view>
								<view>
									<u-radio-group v-model="form.gender">
										<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in gender"
											:key="index" :label="item.name" :name="item.name" activeColor="#DAAF7F">
										</u-radio>
									</u-radio-group>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="客户电话" prop="mobile" required>
							<u-search shape="square" searchIcon=" " maxlength="11" :clearabled="false"
								:showAction="false" v-model="form.mobile" inputAlign="right" bgColor="#eee"
								placeholder="请输入联系方式"></u-search>
						</u-form-item>
						<u-form-item>
							<u-line></u-line>
						</u-form-item>
						<u-form-item>
							<view class="m-font-b u-font-32">楼盘信息</view>
						</u-form-item>
						<u-form-item label="推荐楼盘" required @click="
								!nums ? (showLou = true) : '';
								hideKeyboard();
							">
							<view class="boxxuan u-flex">
								<view class="u-flex">
									{{ !nums ? find : name }}
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="到访人数" prop="number" required>
							<u-search shape="square" searchIcon=" " :clearabled="false" :showAction="false"
								v-model="form.number" inputAlign="right" bgColor="#eee" placeholder=" "></u-search>
						</u-form-item>
						<u-form-item label="到访时间" prop="visitdatetime" required @click="
								showCalendar = true;
								hideKeyboard();
							">
							<u-search shape="square" searchIcon=" " :clearabled="false" :showAction="false"
								v-model="form.visitdatetime" disabled inputAlign="right" bgColor="#eee"
								placeholder="请选择到访时间"></u-search>
							<u-icon slot="right" name="calendar" size="40"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<!-- 领取优惠券 -->
				<!-- <view class="u-m-t-40 m-mg-lr u-p-b-30">
					<view class="u-flex u-flex-around boxw">
						<view>
							<text class="u-font-32">￥</text>
							<text class="u-font-24">内当家优惠券</text>
						</view>
						<view class="boxle" @click="getdian">
							点击领取
						</view>
					</view>
				</view> -->
				<!-- 按钮 -->
				<view class="m-margin u-p-b-10">
					<view class="u-flex u-flex-between">
						<view class="box-left" @click="getchong"><text>重置</text></view>
						<view class="box-right" @click="submit"><text>推荐</text></view>
					</view>
				</view>
			</view>
			<view style="height: 110rpx;"></view>
			<!-- 楼盘 -->
			<u-picker :show="showLou" title="请选择楼盘" keyName="name" @cancel="showLou = false" :columns="propertiesList"
				@confirm="confirmLou"></u-picker>
			<!-- 时间 -->
			<u-popup :show="showTime" zIndex="99999" mode="bottom" round="10" :closeOnClickOverlay="true"
				:overlayStyle="{ zIndex: '99998' }">
				<u-datetime-picker :show="true" mode="time" :closeOnClickOverlay="true" @cancel="showTime = false"
					@close="showTime = false" @confirm="upopen"></u-datetime-picker>
			</u-popup>
			<!-- 日历 -->
			<u-calendar :show="showCalendar" mode="single" color="#0E5543" @confirm="calendarConfirm" @close="close"
				:closeOnClickOverlay="true"></u-calendar>
			<obtain :show="obtain" @showchange="obtain = false"></obtain>
			<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gender: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				showLou: false,
				showTime: false,
				propertiesList: [],
				showCalendar: false,
				form: {
					name: '',
					gender: '男',
					mobile: '',
					properties_id: '',
					visitdatetime: '',
					number: '',
					is_benren: true,
					pid: uni.getStorageSync('userId')
				},
				name: '',
				nums: null,
				time: '',
				rules: {
					name: [{
						required: true,
						message: '请输入客户姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入客户正确手机号',
						trigger: ['blur', 'change']
					}],
					number: [{
						validator: (rule, value, callback) => {
							return /^\d+$/.test(value);
						},
						message: '请输入到访人数(数字)',
						trigger: ['blur', 'change']
					}],
					visitdatetime: [{
						required: true,
						message: '请选择到访时间',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		async onLoad(e) {
			let propertieslist = await this.require('propertieslist', {
				...this.params,
				pnum: 999999,
				city: this.city,
				loupanleixing: '新房'
			});
			this.propertiesList = [propertieslist];
			this.pageLoad = false;
		},
		onShow() {
			let that = this;
			let recommend = uni.getStorageSync('recommend');
			if (recommend) {
				let redObj = JSON.parse(recommend);
				this.nums = 1;
				this.form.properties_id = +redObj.id;
				this.name = redObj.name;
			}
			this.xinxiao();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onHide() {
			uni.removeStorageSync('recommend');
			this.nums = null;
			this.form = {
				name: '',
				gender: '男',
				mobile: '',
				properties_id: '',
				visitdatetime: '',
				number: '',
				is_benren: true,
				pid: uni.getStorageSync('userId')
			};
		},
		watch: {
			nums(newhand, old) {
				if (newhand === 0) {
					this.name = '';
					this.form.properties_id = '';
				}
			}
		},
		computed: {
			find() {
				let list = this.propertiesList[0];
				if (!this.form.properties_id || !list) {
					return '请选择楼盘';
				}
				for (var i = 0; i < list.length; i++) {
					if (list[i].id == this.form.properties_id) {
						return list[i].name;
					}
				}
			}
		},
		methods: {
			getchong() {
				this.form = {
					name: '',
					gender: '男',
					mobile: '',
					properties_id: '',
					visitdatetime: '',
					number: '',
					is_benren: true,
					pid: uni.getStorageSync('userId')
				};
				try {
					let recommend = uni.getStorageSync('recommend');
					if (recommend) {
						let redObj = JSON.parse(recommend);
						this.nums = 1;
						this.form.properties_id = +redObj.id;
					}
				} catch (err) {}
			},
			upopen(e) {
				e.value = e.value == '00:aN' ? '00:00' : e.value;
				this.form.visitdatetime = this.time + ' ' + e.value;
				this.showTime = false;
				this.showCalendar = false;
			},
			close() {
				this.showLou = false;
				this.showCalendar = false;
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},
			confirmLou(e) {
				this.form.properties_id = e.value[0].id;
				this.showLou = false;
			},
			calendarConfirm(e) {
				this.time = e[0] ? e[0] : this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
				this.showTime = true;
			},
			async submit() {
				if (!(await this.getMobile())) {
					return;
				}
				this.requestStatus = false;
				this.$refs.uForm
					.validate()
					.then(async res => {
						if (!this.form.properties_id) {
							return this.$u.toast('请选择楼盘');
						}
						let from = uni.$u.deepClone(this.form);
						from.is_benren = from.is_benren ? 1 : 0;
						from.mobile = +from.mobile;
						from.number = +from.number;
						let res1 = await this.require('addcustomer', from);
						if (res1) {
							this.nextNav('/pages/room/recommendationsuccess');
							this.form = {
								name: '',
								gender: '男',
								mobile: '',
								properties_id: '',
								visitdatetime: '',
								number: '',
								is_benren: true,
								pid: uni.getStorageSync('userId')
							};
							uni.removeStorageSync('recommend');
							this.requestStatus = true;
						}
					})
					.catch(errors => {});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.input {
		background-color: #eee;
	}

	.box-left {
		// padding: 15rpx 60rpx;
		width: 280rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #0e5543;
		border: 1rpx solid #0e5543;
		border-radius: 10rpx;
	}

	.boxxuan {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 8rpx;
		background-color: #eee;
		color: #909399;
		justify-content: flex-end;
	}

	.box-right {
		// padding: 15rpx 80rpx;
		width: 280rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #0e5543;
		color: #fff;
		border-radius: 10rpx;
	}

	.boxw {
		height: 80rpx;
		background-color: #f8efe5;
		border-radius: 10rpx;
		color: #dbb07b;
		align-items: center;
	}

	.boxle {
		border-left: 3rpx solid #dbb07b;
		padding-left: 20rpx;
	}

	.c1 {
		color: #5a5a5a;
	}
</style>
<style>
	page {
		background: #0e5543;
	}
</style>
